<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />
        <div class="request-party-service-manage-body">
          <!-- 搜索板块 -->
          <el-form ref="form" :model="form" inline label-width="80px" class="search-form">

            <el-form-item prop="serviceName">
              <el-input v-model="form.serviceName" clearable placeholder="请输入系统名称或服务编号" />
            </el-form-item>

            <el-form-item prop="serviceName">
              <el-input v-model="form.serviceName" clearable placeholder="申请人" />
            </el-form-item>

            <el-form-item prop="sts">
              <el-select v-model="form.sts" placeholder="状态" clearable filterable>
                <el-option value="1" label="待审核" />
                <el-option value="2" label="已通过" />
                <el-option value="3" label="已拒绝" />
              </el-select>
            </el-form-item>

            <el-form-item class="query-action">
              <el-button type="primary" @click="getTableData"> 查询 </el-button>
              <el-button :loading="loading" @click="resetBtn"> 重置 </el-button>
              <el-button :loading="loading" @click="passBtn"> 通过 </el-button>
              <el-button type="danger" @click="refuse"> 拒绝 </el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据视图 -->
          <div>
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
              @selection-change="handleSelectionChange"
            />

            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <add-list ref="addListRef" />
        <el-dialog
          title="服务详情"
          :visible.sync="dialogVisible"
          width="1000px"
        >
          <DialogDetail ref="dialogDetailRef" :data-list="dataList" />
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import AddList from '@/views/blackAndWhiteLists/components/addList.vue'
import DialogDetail from '@/views/myOpenService/components/dialogDetail.vue'
import { serviceDetail } from '../../api/myOpenService'

export default {
  name: 'RequestAudit',
  components: {
    AddList,
    DialogDetail
  },
  data () {
    return {
      dataList: null,
      dialogVisible: false,
      form: {},
      loading: false,
      tableData: [],
      columnsOptions: [
        { type: 'selection' },
        { label: '请求方IDID', prop: 'serviceName' },
        { label: '请求名称', prop: 'serviceCode' },
        { label: '系统名称', prop: 'provideSystemName' },
        { label: '系统编号', prop: 'applySystemName' },
        { label: '申请时间', prop: 'requestName' },
        { label: '申请人', prop: 'requestId' },
        { label: '申请人', prop: 'requestId' },
        { label: '状态', prop: 'sts',
          customRender: (scope) => {
            let tag
            if (scope.row.sts === '1') {
              tag = <el-tag>待审核</el-tag>
            } else if (scope.row.sts === '2') {
              tag = <el-tag type='success'>审核通过</el-tag>
            } else if (scope.row.sts === '3') {
              tag = <el-tag type='danger'>拒绝</el-tag>
            }
            return tag
          }
        },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return [
              <el-button type='text' onClick={() => this.publicBtn(scope.row)}> 通过 </el-button>,
              <el-button type='text' class='text-del-btn' onClick={() => this.delBtn(scope.row)}> 拒绝 </el-button>
            ]
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: null
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    publicBtn(val) {
      serviceDetail({ id: val.provideId }).then(res => {
        if (res.code == '00000') {
          this.dialogVisible = true
          this.dataList = res.data
        } else {
          this.showMessage('error', '详情调用失败，请联系管理员')
        }
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    getTableData() {
      // this.loading=true
      // const params = {
      //   pageNo: this.pagination.pageNo,
      //   pageSize: this.pagination.pageSize,
      //   ...this.form
      // }
      // myOpenservicePage(params).then(res => {
      //   const { code, data } = res
      //   if (code === '00000') {
      //     this.tableData = data.rows
      //     this.pagination.totalPage = data.totalRows
      //   } else {
      //     this.showMessage('error', '无法获取表单数据')
      //   }
      // }).finally(() => {
      // this.loading=false
      // })
    },
    // 通过
    passBtn(val) {

    },
    resetBtn() {
      this.form = {}
      Object.assign(this.pagination, {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      })
      // this.getTableData()
    },
    async refuse(val) {
      let ids
      if (val !== true && typeof val === 'object' && val !== null) {
        ids = [val.id]
      } else if (this.manyId === null || this.manyId.length === 0) {
        return this.showMessage('info', '请勾选要取消的数据')
      } else {
        ids = this.manyId
      }

      this.confirmDeletion(ids)
    },
    confirmDeletion(ids) {
      const message = `确定要拒绝${ids.length > 1 ? '这些' : '这条'}申请吗？`
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('拒绝成功')
        // return myOpenserviceDelete({ ids })
      })
      //   .then(() => {
      //   this.showMessage('success', ids.length > 1 ? '批量拒绝成功' : '拒绝成功')
      //   this.getTableData()
      // }).catch(err => {
      //   // 用户主动取消操作
      //   if (err === 'cancel') {
      //     this.showMessage('info', '已取消删除')
      //   } else {
      //     // API 调用或其他错误
      //     this.showMessage('error', '取消失败，请稍后重试')
      //   }
      // })
    },
    addBtn() {
      this.$refs.addListRef.dialogVisible = true
    },
    handleSelectionChange(val) {
      this.manyId = val.map(item => item.id)
    },
    showMessage(type, message) {
      this.$message[type](message)
    }
  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

